<template>
  <div class="user">
    <!-- flex布局 van-tag标记-->
    <van-row class="header" type="flex" align="center">
      <van-col span="24">
        <van-row type="flex">
          <van-col span="4" class="cols">
            <!-- <van-icon :src="cptData" name="friends-o" size="40px" style="margin-left:10px"/> -->
			<img class="usericon" :src="cptData" style="margin-left:10px"/>
          </van-col>
          <van-col span="15" class="cols">
            <h3 style="color: black;">{{usermsg.nikename}}</h3>
            <!-- <van-tag round color="#fff" text-color="#399">上次登录日期</van-tag> -->
			<button style="border: none; background-color: yellow; color: red; position: fixed;left: 65px;top: 75px;" @click="logout">注销</button>
          </van-col>
          <van-col span="5" class="cols">
            <van-icon name="setting-o" size="20px"/>
            <van-icon name="coupon-o" size="20px" style="float:right"/>
          </van-col>
        </van-row>
        <van-row type="flex" justify="space-around">
          <van-col span="6" class="cols">
            <span class="category-num">13</span>
            <span class="category-txt">收藏夹</span>
          </van-col>
          <van-col span="6" class="cols">
            <span class="category-num">23</span>
            <span class="category-txt">关注店铺</span>
          </van-col>
          <van-col span="6" class="cols">
            <span class="category-num">{{usermsg.follow}}</span>
            <span class="category-txt">粉丝</span>
          </van-col>
          <van-col span="6" class="cols">
            <span class="category-num">{{usermsg.fans}}</span>
            <span class="category-txt">关注</span>
          </van-col>
        </van-row>
      </van-col>
    </van-row>

    <!-- Panel 面板order flex布局 -->
    <van-panel class="order" title="我的订单" status="查看全部订单">
      <van-row type="flex" justify="space-around">
        <van-col span="6" class="cols">
          <van-icon name="hot-o" size="25px" color="#399"/>
          <span class="category-txt">代付款</span>
        </van-col>
        <van-col span="6" class="cols">
          <van-icon name="hot-o" size="25px" color="#399"/>
          <span class="category-txt">代发货</span>
        </van-col>
        <van-col span="6" class="cols">
          <van-icon name="hot-o" size="25px" color="#399"/>
          <span class="category-txt">待收货</span>
        </van-col>
        <van-col span="6" class="cols">
          <van-icon name="hot-o" size="25px" color="#399"/>
          <span class="category-txt">评价</span>
        </van-col>
      </van-row>
    </van-panel>

    <!-- Panel 面板order 栅格布局 -->
    <van-panel class="order" title="必备工具" status="查看全部工具">
      <van-row>
        <van-col span="6" class="cols">
          <van-icon name="hot-o" size="25px" color="#399"/>
          <span class="category-txt">代付款</span>
        </van-col>
        <van-col span="6" class="cols">
          <van-icon name="hot-o" size="25px" color="#399" info="2"/>
          <span class="category-txt">代发货</span>
        </van-col>
        <van-col span="6" class="cols">
          <van-icon name="hot-o" size="25px" color="#399"/>
          <span class="category-txt">待收货</span>
        </van-col>
        <van-col span="6" class="cols">
          <van-icon name="hot-o" size="25px" color="#399"/>
          <span class="category-txt">评价</span>
        </van-col><van-col span="6" class="cols">
          <van-icon name="hot-o" size="25px" color="#399"/>
          <span class="category-txt">代付款</span>
        </van-col>
        <van-col span="6" class="cols">
          <van-icon name="hot-o" size="25px" color="#399"/>
          <span class="category-txt">代发货</span>
        </van-col>
        <van-col span="6" class="cols">
          <van-icon name="hot-o" size="25px" color="#399"/>
          <span class="category-txt">待收货</span>
        </van-col>
        <van-col span="6" class="cols">
          <van-icon name="hot-o" size="25px" color="#399"/>
          <span class="category-txt">评价</span>
        </van-col>
      </van-row>
    </van-panel>

    
    <van-cell-group title="分组2">
      <van-cell title="单元格" value="内容" />
      <van-cell title="单元格" value="内容" />
      <van-cell title="单元格" value="内容" />
      <van-cell title="单元格" value="内容" />
    </van-cell-group>

  </div>
</template>
<script>
export default {
  data() {
    return {
		usermsg:''
	};
  },
	methods:{
				logout(){
					window.localStorage.removeItem('user');
					this.$router.push('/login')
				}
			},

	mounted() {
		let arr = JSON.parse(localStorage.getItem("user"))
		// console.log(arr);
		this.usermsg=arr.data
		// console.log(this.usermsg);
	},
	computed: {
	    cptData(){
	      return this.$route.query.data.icon.includes('http') ? this.$route.query.data.icon : this.$url + this.$route.query.data.icon
	    }
	  }
			
}
</script>

<style scoped>
	.header{
		display: flex;
		align-content: center;
	}
.user{padding-bottom:50px;}
.user .header {
  height: 150px;
  background: gray;
  color: #fff;
}
.van-panel__header-value{
  color:#888;
  font-size:.8em;
}
.van-cell__value {
  font-size:.8em;
}
.user .header .cols {
  padding: 10px;
}
.user .order{margin: 10px 0;}
.user .order .cols{
  
  padding: 10px;
  text-align: center;
}
.category-num {
  display: block;
  margin-bottom: 5px;
  text-align: center;
}
.category-txt {
  display: block;
  margin-bottom: 5px;
  text-align: center;
}
.usericon{
	width: 40px;
	height: 40px;
}
</style>